<template>
  <div id="hed">
    <div id="fot">
      <div id="fot_text">
        <img src="../assets/img/logo.png" alt="" />
        <p>优质甄选·高枕无忧</p>
        <p>
          <input
            type="text"
            placeholder="请输入您的用户名"
            v-model.trim="form_data.username"
          />
          <input
            type="password"
            placeholder="请输入相应的密码"
            v-model.trim="form_data.password"
          />
          <button type="button" @click="submit">登录</button>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form_data: {
        username: "admin",
        password: "admin888",
      },
    };
  },

  methods: {
    submit() {
      
      if (this.form_data.username === "") {
        return alert("用户名不可以为空");
      }
      if (this.form_data.password === "") {
        return alert("密码不可以为空");
      }
      
      this.$http.post("/api/userlogin", this.form_data).then(res=>{
        if(res.code === 200) {

          var login_data = JSON.stringify(res.list)
          localStorage.setItem("login_data", login_data)
          this.$router.replace("/index")
        }
      })
    }
  }
}
</script>

<style>
#hed {
  width: 100vw;
  height: 100vh;
  background: linear-gradient(to bottom, #ff5d3e, #eb8b7a);
  overflow: auto;
}
#fot {
  width: 650px;
  height: 500px;
  margin-top: 80px;
  margin-left: 550px;
  background-image: url("../assets/img/loginbg.png");
  background-size: 100% 100%;
}
#fot_text {
  border: none;
  margin-left: 270px;
  text-align: center;
}
#fot_text img {
  width: 280px;
  margin-top: 110px;
}
#fot_text p:nth-of-type(1) {
  margin-top: 30px;

  margin-bottom: 40px;
  color: #a1a0a0;
  letter-spacing: 13px;
}

#fot_text input {
  width: 250px;
  margin-top: 20px;
  border: none;
  border-bottom: 1px #f64834 solid;
  line-height: 30px;
  outline: none;
  background-color: #fff4f2;
  color: #bfbcbb;
  font-size: 12px;
}
#fot_text button {
  width: 250px;
  line-height: 35px;
  margin-top: 30px;
  border-radius: 17px;
  border: none;
  color: #fff;
  font-size: 12px;
  letter-spacing: 30px;
  padding-left: 30px;
  background-color: #f64834;
}
</style>